<div class="container-fluid data-summary-tab" ng-controller="DataSummaryController">

  <div class="row"
       ng-repeat="dataRuleDefn in dataRuleDefinitions = (pipelineRules.dataRuleDefinitions | filter: {lane: selectedObject.outputLane, enabled: true})">


    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="panel panel-default">
        <div class="panel-heading">
          <span>{{dataRuleDefn.label}}</span>
          <span>(Condition - {{dataRuleDefn.condition}} )</span>
        </div>
        <div class="panel-body rule-panel-body">


          <!-- Triggered Alert -->
          <div class="col-md-12 col-lg-12 triggered-alerts"
               ng-repeat="triggeredAlert in laneAlerts  = (triggeredAlerts | filter : {rule: {id : dataRuleDefn.id}})">
            <div class="alert alert-danger clearfix" role="alert">
              <i class="fa fa-exclamation-triangle"></i>

              <span ng-if="triggeredAlert.gauge.value.exceptionMessage"
                     ng-bind="triggeredAlert.gauge.value.exceptionMessage"></span>

              <span ng-if="!triggeredAlert.gauge.value.exceptionMessage"
                    ng-bind="triggeredAlert.rule.alertText"></span>

              <div class="pull-right">
                <a href="#"
                   ng-click="deleteTriggeredAlert(triggeredAlert)">
                  <span translate="global.form.delete">Delete</span>
                </a>
                &nbsp;|&nbsp;
                <a href="#"
                   ng-click="selectRulesTab(triggeredAlert)">
                  <span translate="global.form.changeRule">Change Rule</span>
                </a>
              </div>

            </div>
          </div>


          <!-- Sampling Records -->
          <div class="col-md-6 col-lg-6" ng-controller="DataSummarySamplingController">
            <table class="table">
              <thead>
              <tr>
                <th class="col-md-4">
                  <span translate="global.form.sampleRecords">Sample Records</span>
                  <i class="fa fa-refresh pointer icon-button"
                     ng-click="refreshSamplingRecords()"
                     tooltip-placement="right"
                     tooltip="{{'global.form.refresh' | translate}}"></i>
                </th>
              </tr>
              </thead>
              <tbody ng-hide="showBadRecordsLoading">
              <tr ng-repeat="record in samplingRecords">
                <td>
                  <record-tree
                    record="record"
                    record-value="record.value"
                    field-name="('global.form.record' | translate)+($index+1)"
                    is-root="true"
                    editable="false">
                  </record-tree>
                </td>
              </tr>

              <tr ng-if="samplingRecords.length === 0">
                <td class="no-records text-center"
                    translate="home.previewPane.noRecords">No Records to view.</td>
              </tr>

              </tbody>

            </table>
            <div show-loading="showRecordsLoading"></div>
          </div>


          <!-- Meter -->
          <div class="col-md-6 col-lg-6"
               ng-if="dataRuleDefn.meterEnabled"
               ng-controller="DataSummaryMeterController">

            <ul class="properties">
              <li>
                <span class="properties-label">Count:</span>
                <span class="properties-value">{{count}}</span>
              </li>
            </ul>

            <nvd3-discrete-bar-chart
              data="chartData"
              id="{{dataRuleDefn.id}}"
              height="250"
              staggerLabels="true"
              showXAxis="true"
              showYAxis="true"
              showValues="true"
              showLegend="true"
              yaxislabel="{{'home.detailPane.recordsPerSecond' | translate}}"
              yaxislabeldistance="30"
              tooltips="true"
              tooltipcontent="getTooltipContent()"
              margin="{left:65,top:10,bottom:40,right:20}">
            </nvd3-discrete-bar-chart>

          </div>

        </div>

      </div>
    </div>

  </div>

  <div class="row" ng-if="dataRuleDefinitions.length ===0">
    <div class="col-md-12" >
      <div class="alert alert-info" role="alert">
        <i class="fa fa-info-circle"></i>
        <span>{{'home.detailPane.dataSummaryTab.noRulesMessage' | translate}}</span>
      </div>
    </div>
  </div>

</div>